<template>
  <div class="login-container">
    <!-- 顶部logo -->
    <div class="logo-wrapper">
      <img src="../../assets/创建运输管理系统.png" alt="logo" class="logo-icon">
      <span class="logo-text">TMS运输管理系统</span>
    </div>
    
    <!-- 登录卡片 -->
    <div class="login-card">
      <h2 class="title">欢迎登录</h2>
      
      <!-- 表单区域 -->
      <div class="form-container">
        <div class="form-item">
          <label>账号</label>
          <input type="text" v-model="loginForm.username" placeholder="请输入账号">
        </div>
        
        <div class="form-item">
          <label>密码</label>
          <input type="password" v-model="loginForm.password" placeholder="请输入密码">
        </div>
        
        <div class="help-links">
          <a href="javascript:;" class="forgot-link">忘记密码</a>
          <a href="javascript:;" class="service-link">联系客服</a>
        </div>
        
        <button class="login-btn" @click="handleLogin">登录</button>
      </div>
      
      <!-- 底部版权信息 -->
      <div class="copyright">
        © 2023 七尾原型工作室
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
    
  },
  methods: {
    handleLogin() {
      // 登录逻辑处理
      console.log('登录表单数据：', this.loginForm)
    }
  }
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  background-color: #4169E1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.logo-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}

.logo-text {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}

.login-card {
  background: #fff;
  border-radius: 16px;
  width: 480px;
  padding: 48px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 28px;
  color: #333;
  text-align: center;
  margin-bottom: 48px;
  font-weight: 500;
}

.form-item {
  margin-bottom: 32px;
}

.form-item label {
  display: block;
  margin-bottom: 12px;
  color: #333;
  font-size: 16px;
}

.form-item input {
  width: 100%;
  height: 48px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 16px;
  box-sizing: border-box;
}

.form-item input::placeholder {
  color: #999;
}

.help-links {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}

.help-links a {
  color: #4169E1;
  font-size: 14px;
  text-decoration: none;
}

.forgot-link {
  /* 忘记密码链接样式 */
}

.service-link {
  /* 联系客服链接样式 */
}

.login-btn {
  width: 100%;
  height: 48px;
  background: #4169E1;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
}

.login-btn:hover {
  background: #3157d5;
}

.copyright {
  text-align: center;
  color: #999;
  font-size: 14px;
  margin-top: 48px;
}
</style> 